<!DOCTYPE HTML>
<head>
  <style type="text/css">
    div {
      margin: 20px 5px;
      font-size: 16px;
      font-weight: bold;
      color: #0071BD;
      cursor: pointer;
    }
    #note {
      color: black;
      cursor: default;
    }
  </style>
</head>
<body>
  <div id="find1">find node by Id '11'</div>
  <div id="find2">find nodes by conditions {'name': 'xiaoxue'}</div>
  <div id="find3">find nodes by conditions {'role': /engineer/i, 'birth': {'>=': 1985, '<': 1990}}</div>
  <div id="find4">find parent node of the node with id '11'</div>
  <div id="find5">find sibling nodes of the node with id '11'</div>
  <div id="find6">find ancestor nodes of the node with id '12'</div>
  <div id="note">Note: console of the browser will show you test result</div>
  <script type="text/javascript" src="JSONLoop.js"></script>
  <script tyoe="text/javascript">
    var obj = {
      'id': '1', 'name': 'renyang', 'birth': 1985, 'role': 'manager',
      'member': [
        {
          'id': '2', 'name': 'huangfan', 'birth': 1983, 'role': 'manager',
          'member': [
            {'id': '3', 'name': 'chenxiong', 'birth': 1984, 'role': 'engineer'}
          ]
        },
        {
          'id': '4', 'name': 'yuguang', 'birth': 1981, 'role': 'engineer manager',
          'member': [
            {'id': '5', 'name': 'chenjian', 'birth': 1985, 'role': 'engineer'}
          ]
        },
        {
          'id': '6', 'name': 'deshi', 'birth': 1980, 'role': 'engineer manager',
          'member': [
            {'id': '7', 'name': 'haibo', 'birth': 1983, 'role': 'engineer'},
            {'id': '8', 'name': 'weitao', 'birth': 1987, 'role': 'engineer'},
            {'id': '9', 'name': 'liuzheng', 'birth': 1986, 'role': 'engineer'},
            {'id': '10', 'name': 'xiaoxue', 'birth': 1988, 'role': 'engineer'},
            {'id': '11', 'name': 'xuebin', 'birth': 1982, 'role': 'engineer',
              'member': [
                {'id': '12', 'name': 'sam', 'birth': 1980, 'role': 'engineer'},
                {'id': '13', 'name': 'loklaan', 'birth': 1990, 'role': 'engineer'}
              ]
            }
          ]
        }
      ]
    };

    var jsonloop = new JSONLoop(obj, 'id', 'member');

    document.getElementById('find1').addEventListener('click', function(){
      jsonloop.findNodeById(obj, '11', function(err, node) {
        if (err) {
          console.log(err);
        } else {
          console.clear();
          console.dir(node);
        }
      });
    }, false);

    document.getElementById('find2').addEventListener('click', function(){
      jsonloop.findNodes(obj, {'name': 'xiaoxue'}, function(err, nodes) {
        console.clear();
        nodes.forEach(function(node) {
          console.dir(node);
        });
      });
    }, false);

    document.getElementById('find3').addEventListener('click', function(){
      jsonloop.findNodes(obj, {'role': /engineer/i, 'birth': {'>=': 1985, '<': 1990}},
        function(err, nodes) {
          console.clear();
          nodes.forEach(function(node) {
            console.dir(node);
          });
        });
    }, false);

    document.getElementById('find4').addEventListener('click', function(){
      jsonloop.findNodeById(obj, '11', function(err, node) {
        if (err) {
          console.log(err);
        } else {
          console.clear();
          jsonloop.findParent(obj, node, function(err, node) {
            console.clear();
            if (err) {
              console.log(err);
            } else {
              console.dir(node);
            }          
          });
        }
      });
    }, false);

    document.getElementById('find5').addEventListener('click', function(){
      jsonloop.findNodeById(obj, '11', function(err, node) {
        if (err) {
          console.log(err);
        } else {
          console.clear();
          jsonloop.findSiblings(obj, node, function(err, siblings) {
            console.clear();
            if (err) {
              console.log(err);
            } else {
              siblings.forEach(function(item) {
                console.dir(item);
              });
            }          
          });
        }
      });
    }, false);

    document.getElementById('find6').addEventListener('click', function(){
      jsonloop.findNodeById(obj, '12', function(err, node) {
        console.clear();
        if (err) {
          console.log(err);
        } else {
          jsonloop.findAncestors(obj, node, function(err, ancestors) {
            console.clear();
            if (err) {
              console.log(err);
            } else {
              ancestors.forEach(function(item) {
                console.dir(item);
              });
            }          
          });
        }
      });
    }, false);


  </script>
</body>
</html>